<template>
  <el-container>
    <!--左侧-->
    <el-aside>
      <img src="@/assets/login-box.svg" class="asideImage">
      <p class="asideTitle">
        欢迎使用动力CRM系统
      </p>
    </el-aside>

    <!--右侧-->
    <el-main>

      <div class="mainTitle">欢迎登录</div>
      <el-form ref="loginRefForm" :model="loginUser" label-width="120px" :rules="loginRules">

        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="loginUser.loginAct" />
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="loginUser.loginPwd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login" style="width: 100%;">登 录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="记住我" v-model="loginUser.rememberMe"/>
        </el-form-item>
      </el-form>

    </el-main>
  </el-container>
</template>

<script>
//从@/http/httpRequest.js导入doPost()函数，httpRequest文件的后缀可以省略
import {doGet, doPost} from "@/http/httpRequest";
import {jwtName, messageTip, removeJwt} from "@/util/util";

//导出默认范围，export default在一个页面中只可以写一次，格式是固定的
export default {
  //定义组件名字
  name: "LoginView",

  //data()函数，里面定义页面上需要使用的变量
  data() {
    return {
      //定义页面登录form表单对象，初始值是空
      loginUser : {},
      //定义数字
      age : 0,
      //定义字符串
      name : '',
      //定义数组
      idArray : [],
      //定义对象数据
      userArray : [{}],
      //定义登录时的表单验证规则对象
      loginRules : {
        //验证登录账号字段（规则可以有多个，所以是一个数组）
        loginAct : [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        //验证登录密码字段（规则可以有多个，所以是一个数组）
        loginPwd : [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur' },
        ]
      }
    }
  },

  //vue生命周期中的一个函数钩子，它是在页面渲染后执行
  mounted() {
    //判断该用户是否需要免登录（不登录就直接进入系统）
    this.freeLogin();
  },

  //页面上需要使用的各种js函数都写在methods属性里面
  methods : {
    //登录
    login() {
      //箭头函数，和java中的lambda表达式写法类似
      this.$refs.loginRefForm.validate( (isValid) => {
          if (isValid) { //如果isValid是true，表示验证规则是通过的，此时可以提交登录
            //既然开始去登录，那么把浏览器之前存储的sessionStorage、localStorage都清除一下
            removeJwt();

            let formData = new FormData();
            formData.append("loginAct", this.loginUser.loginAct);
            formData.append("loginPwd", this.loginUser.loginPwd);
            formData.append("rememberMe", this.loginUser.rememberMe);
            doPost("/api/login", formData).then( (resp) => { //ajax请求后的结果在then函数里面可以获取到，resp就是结果数据
              // R对象包装结果： code、msg、data
              console.log(resp); //返回的resp有6个字段,config,headers,data,request,status,statusText
              if (resp.data.code === 200) {
                //登录成功，提示一下
                messageTip("登录成功", "success");

                //把后端返回的用于保存登录状态的jwt在浏览器客户端存起来（使用sessionStorage或者localStorage来存储）

                if (this.loginUser.rememberMe) { //选择记住我了，jwt放入localStorage
                  window.localStorage.setItem(jwtName(), JSON.stringify(resp.data.data)); //转成字符串
                } else { //否则放入sessionStorage
                  window.sessionStorage.setItem(jwtName(), JSON.stringify(resp.data.data));
                }

                //登录成功后，跳转到系统主页面
                window.location.href = "/dashboard";
              } else {
                //登录失败，提示一下
                messageTip("登录失败，原因：" + resp.data.msg, "error");
              }
            })
          }
      })
    },

    //免登录
    freeLogin() {
      let jwt = window.localStorage.getItem(jwtName());
      if (jwt) { //表示jwt存在，有值，不是空等这个意思
        //可以免登录
        doGet("/api/freeLogin", {}).then( resp => {
          if (resp.data.code === 200) {
            //后台验证通过，可以进入系统
            window.location.href = "/dashboard";
          }
        })
      }
    }
  }
}
</script>

<!--scoped属性表示当前的css样式只对当前页面有效，不会影响到其他任何页面，对其他页面都无效-->
<style scoped>
.el-aside {
  background: black;
  width: 40%;
  text-align: center;
}
.el-main {
  height: calc(100vh);
}
.asideImage {
  width: 410px;
}
.asideTitle {
  color: white;
  font-size: 28px;
}
.mainTitle {
  width: 60%;
  margin: auto;
  margin-top: 120px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}
.el-form {
  width: 60%;
  margin: auto;
}
</style>